<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
  </ul>
  <body>
    <script>
      //map是一种数据结构 : 字典
      //类似对象 补充对象的不足
      //对象的键名只能是字符串  map的键名可以是任何类型

      //Map的创建
      //方式一: 通过二维数组来创建
      // let map = new Map([
      //   ["name", "张三"],
      //   ["age", 20],
      //   ["height", "180cm"],
      // ]);
      // console.log(map);

      //方式二: 通过set方法 来添加键名和键值
      // let map = new Map();
      // map.set("name", "张三");
      // map.set("age", 20);
      // map.set("height", "180cm");
      // console.log(map);

      //map下的方法
      //1.map的长度: size
      // let map = new Map([
      //   ["name", "张三"],
      //   ["age", 20],
      //   ["height", "180cm"],
      // ]);
      // console.log(map.size);

      //根据键名获取键值 : get
      // let map = new Map([
      //   ["name", "张三"],
      //   ["age", 20],
      //   ["height", "180cm"],
      // ]);

      // console.log(map.get("age"));

      //3.判断是否拥有某个键名 : has
      // let map = new Map([
      //   ["name", "张三"],
      //   ["age", 20],
      //   ["height", "180cm"],
      // ]);
      // console.log(map.has("age"));

      //4.根据键名 删除某个属性 delete
      // let map = new Map([
      //   ["name", "张三"],
      //   ["age", 20],
      //   ["height", "180cm"],
      // ]);
      // map.delete("height");
      // console.log(map);

      //5.删除所有属性 clear
      // let map = new Map([
      //   ["name", "张三"],
      //   ["age", 20],
      //   ["height", "180cm"],
      // ]);
      // map.clear();
      // console.log(map);

      //6.获取所有的键名和键值
      // let map = new Map([
      //   ["name", "张三"],
      //   ["age", 20],
      //   ["height", "180cm"],
      // ]);
      // console.log(map.keys());
      // console.log(map.values());

      let keyObj = {
        myKey: "key1",
      };
      // let obj = {
      //   [keyObj]: "值1",
      // };
      // console.log(obj);

      let m = new Map();
      m.set(keyObj, "值1");
      console.log(m);

      m.forEach(function (item, key) {
        console.log(typeof key);
      });
      //
      //
      //
      //
      //
      //
      //
      //
      //
      //

      // 点击li的时候改变对应li的颜色；
      let arr = ["red", "blue", "yellow"];
      let map = new Map();
      let lis = document.querySelectorAll("li");
      lis.forEach((item, key) => {
        map.set(item, arr[key]);
        // console.log(item, arr[key]);
      });
      map.forEach(function (item, key) {
        key.onclick = function () {
          this.style.background = item;
        };
      });

      console.log(map);
    </script>
  </body>
</html>
